<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <!--margin: 0 auto  居中显示-->
            <el-card style="width: 600px;height: 1000px;margin: 0 auto">
                <el-form label-width="80px">
                    <el-form-item label="商品标题">
                        <el-input type="text" v-model="p.title"></el-input>
                    </el-form-item>

                    <el-form-item label="商品价格">
                        <el-input type="text" v-model="p.price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品原件">
                        <el-input type="text" v-model="p.oldPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="商品库存">
                        <el-input type="text" v-model="p.storage"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select v-model="p.categoryId">
                            <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌">
                        <el-select v-model="p.brandId">
                            <el-option v-for="b in brandArr" :label="b.name" :value="b.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品图片">
                        <img :src="oldUrl" v-if="isShow" width="100" height="100" alt="">
                        <el-upload
                                action="/upload"
                                name="pic"
                                limit="1"
                                list-type="picture-card"
                                :on-success="handleSuccess"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="商品详情">
                        <el-form-item>
                            <img :src="oldContent" v-if="isShow" width="100" height="100" alt="">
                            <el-upload
                                    action="/upload"
                                    name="pic"
                                    limit="1"
                                    list-type="picture-card"
                                    :on-success="handleSuccess2"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>
                    </el-form-item>

                    <el-form-item>
                        <a href="/productList.html" target="content">
                            <el-button type="success" @click="update()">修改商品</el-button>
                        </a>
                    </el-form-item>
                </el-form>
            </el-card>

        </div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function() {
                return {
                    isShow:true,
                    dialogImageUrl: '',
                    dialogVisible: false,
                    p:{
                        title:"",
                        url:"",
                        storage:"",
                        price:"",
                        oldPrice:"",
                        content:"",
                        categoryId:"",
                        brandId:"",
                    },
                    categoryArr:[],
                    brandArr:[],
                    oldUrl:"",
                    oldContent:"",

                }
            },

            methods:{
                update(){
                    if (v.p.url==""){
                        v.$message.error("请选择上传的图片!");
                        return;
                    }
                    //发出添加商品的请求
                    axios.post("/product/update",v.p).then(function (response) {
                    })
                },
                handleSuccess(response,file,fileList){
                    //response代表服务器响应的图片路径
                    v.p.url = response;
                    v.isShow = false;
                },
                handleSuccess2(response,file,fileList){
                    //response代表服务器响应的图片路径
                    v.p.content = response;
                },
                Back(){
                    location.href="productList.html";
                },
                handleRemove(file, fileList) {
                    v.isShow=true;
                    console.log(file, fileList);
                    //发出删除图片的请求
                    axios.get("/remove?url="+v.url).then(function () {
                        v.$message("服务器图片删除完成");
                        v.p.url="";
                    });
                    axios.get("/remove?url="+v.content).then(function () {
                        v.$message("服务器图片删除完成");
                        v.p.content="";
                    })
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                }
            },
            created:function () {
                axios.get("/brand/select").then(function (response) {
                    v.brandArr = response.data;
                });
                axios.get("/category/select").then(function (response) {
                    v.categoryArr = response.data;
                });
                //通过id请求需要修改的商品信息
                axios.get("/product/selectById/update"+location.search).then(function (response) {
                    v.p = response.data;
                    v.oldUrl = v.p.url;
                    v.oldContent = v.p.content;
                })
            }
        })
    </script>
</html>